<template>
  <div class="homepage">
    <!-- 全屏轮播图 -->
    <div class="hero-carousel">
      <el-carousel
        :interval="3500"
        arrow="hover"
        indicator-position="outside"
        height="100vh"
        class="hero-carousel-container"
        @change="handleCarouselChange"
      >
        <el-carousel-item v-for="(slide, index) in carouselSlides" :key="index">
          <div
            class="carousel-slide"
            :style="{ backgroundImage: `url(${slide.background})` }"
            :class="{ 'slide-active': currentSlideIndex === index }"
          >
            <!-- 动态背景网格 -->
            <div class="grid-overlay"></div>

            <div class="slide-overlay"></div>
            <div class="slide-content">
              <div class="slide-text">
                <h1
                  class="slide-title"
                  :class="{ 'title-animate': currentSlideIndex === index }"
                >
                  <span class="title-line">{{ slide.title }}</span>
                </h1>
                <p
                  class="slide-description"
                  :class="{
                    'description-animate': currentSlideIndex === index,
                  }"
                >
                  {{ slide.description }}
                </p>
                <div
                  class="slide-actions"
                  :class="{ 'actions-animate': currentSlideIndex === index }"
                >
                  <el-button
                    type="primary"
                    size="large"
                    class="hero-btn primary-btn"
                    @click="handleGetStarted"
                  >
                    <i class="el-icon-right"></i>
                    立即体验
                  </el-button>
                  <el-button
                    size="large"
                    class="hero-btn secondary-btn"
                    @click="handleLearnMore"
                  >
                    <i class="el-icon-info"></i>
                    了解更多
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 悬浮导航栏 -->
    <div class="floating-navbar" :class="{ 'navbar-scrolled': isScrolled }">
      <div class="navbar-container">
        <div class="navbar-logo">
          <svg-icon icon-class="dashboard" class="logo-icon" />
          <span class="logo-text">智能办公</span>
        </div>

        <!-- 桌面端导航菜单 -->
        <div class="navbar-menu desktop-menu">
          <div
            v-for="(item, index) in navItems"
            :key="index"
            class="nav-item"
            @click="handleNavClick(item)"
          >
            <svg-icon :icon-class="item.icon" class="nav-icon" />
            <span>{{ item.title }}</span>
          </div>
        </div>

        <!-- 移动端汉堡菜单 -->
        <div class="mobile-menu-toggle" @click="toggleMobileMenu">
          <div class="hamburger" :class="{ active: isMobileMenuOpen }">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>

        <div class="navbar-actions">
          <el-button
            size="medium"
            class="nav-btn register-btn"
            @click="handleRegister"
          >
            注册
          </el-button>
          <el-button
            type="primary"
            size="medium"
            class="nav-btn login-btn"
            @click="handleLogin"
          >
            登录
          </el-button>
        </div>
      </div>

      <!-- 移动端菜单面板 -->
      <div class="mobile-menu-panel" :class="{ open: isMobileMenuOpen }">
        <div class="mobile-menu-content">
          <div
            v-for="(item, index) in navItems"
            :key="index"
            class="mobile-nav-item"
            @click="handleMobileNavClick(item)"
          >
            <svg-icon :icon-class="item.icon" class="mobile-nav-icon" />
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能模块展示 -->
    <div class="features-section">
      <div class="container">
        <div class="section-header">
          <h2>智能办公核心功能</h2>
          <p>提升工作效率，实现智能化办公管理</p>
        </div>
        <div class="features-grid">
          <div
            v-for="(feature, index) in features"
            :key="index"
            class="feature-card"
            @click="handleFeatureClick(feature)"
          >
            <div class="feature-icon">
              <svg-icon :icon-class="feature.icon" />
            </div>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
            <div class="feature-actions">
              <el-button type="text" size="medium" class="feature-btn">
                了解更多 <i class="el-icon-arrow-right"></i>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计数据 -->
    <div class="stats-section">
      <div class="container">
        <div class="stats-grid">
          <div class="stat-item" v-for="(stat, index) in stats" :key="index">
            <div class="stat-number">{{ stat.number }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h4>智能办公应用</h4>
            <p>提升办公效率，实现智能化管理</p>
          </div>
          <div class="footer-section">
            <h4>联系我们</h4>
            <p>邮箱：数字牧马人@123.com</p>
            <p>电话：123456789</p>
          </div>
          <div class="footer-section">
            <h4>关注我们</h4>
            <div class="social-links">
              <i class="el-icon-chat-dot-round"></i>
              <i class="el-icon-phone"></i>
              <i class="el-icon-message"></i>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <p>&copy; 2025 智能办公应用软件. 数字牧马人团队制作.</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";

export default {
  name: "Homepage",
  data() {
    return {
      isScrolled: false,
      carouselSlides: [
        {
          title: "智能办公新时代",
          description: "AI驱动的办公管理系统，让工作更高效、更智能",
          background: require("@/assets/images/background1.png"),
        },
        {
          title: "团队协作无界限",
          description: "打破部门壁垒，实现跨部门高效协作与沟通",
          background: require("@/assets/images/background2.png"),
        },
        {
          title: "数据驱动决策",
          description: "智能分析业务数据，为管理决策提供有力支撑",
          background: require("@/assets/images/background3.png"),
        },
      ],
      navItems: [
        { title: "首页", icon: "dashboard", path: "/dashboard/index" },
        { title: "知识库", icon: "education", path: "/repository" },
        { title: "文档管理", icon: "documentation", path: "/wendang" },
        { title: "会议管理", icon: "meeting-room", path: "/meeting" },
        { title: "周报月报", icon: "date", path: "/date/weekly-report" },
      ],
      features: [
        {
          title: "智能知识库",
          description: "AI驱动的知识管理系统，智能分类、快速检索",
          icon: "education",
          path: "/repository",
        },
        {
          title: "文档协作",
          description: "实时协作编辑，版本控制，智能审批流程",
          icon: "documentation",
          path: "/wendang",
        },
        {
          title: "会议管理",
          description: "智能会议安排，视频会议集成，会议纪要自动生成",
          icon: "meeting-room",
          path: "/meeting",
        },
        {
          title: "周报月报",
          description: "智能生成周报月报，支持多种模板和自定义配置",
          icon: "date",
          path: "/date/weekly-report",
        },
        {
          title: "群聊私有助手",
          description: "专属群聊AI助手，智能回复，群组管理",
          icon: "peoples",
          path: "/AIhelp/peopleChat",
        },
        {
          title: "智能对话助手",
          description: "AI智能对话，多轮交互，知识问答",
          icon: "ai-assistant",
          path: "/AIhelp/zhineng",
        },
      ],
      stats: [
        { number: "1,000+", label: "体验用户" },
        { number: "5,000+", label: "文档数量" },
        { number: "99.9%", label: "系统可用性" },
        { number: "24/7", label: "技术支持" },
      ],
      currentSlideIndex: 0,
      isMobileMenuOpen: false,
    };
  },
  mounted() {
    this.handleScroll();
    window.addEventListener("scroll", this.handleScroll);
    this.initMouseFollow();
    document.addEventListener("click", this.handleOutsideClick);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
    this.removeMouseFollow();
    document.removeEventListener("click", this.handleOutsideClick);
  },
  methods: {
    handleScroll() {
      this.isScrolled = window.scrollY > 100;
    },
    initMouseFollow() {
      // this.mouseFollowHandler = (e) => {
      //   const carousel = document.querySelector('.hero-carousel');
      //   if (carousel) {
      //     const rect = carousel.getBoundingClientRect();
      //     const x = ((e.clientX - rect.left) / rect.width) * 100;
      //     const y = ((e.clientY - rect.top) / rect.height) * 100;
      //
      //     carousel.style.setProperty('--mouse-x', `${x}%`);
      //     carousel.style.setProperty('--mouse-y', `${y}%`);
      //   }
      // };
      // document.addEventListener('mousemove', this.mouseFollowHandler);
    },
    removeMouseFollow() {
      // if (this.mouseFollowHandler) {
      //   document.removeEventListener('mousemove', this.mouseFollowHandler);
      // }
    },
    handleGetStarted() {
      this.$router.push("/login");
    },
    handleLearnMore() {
      // 滚动到功能展示区域
      document.querySelector(".features-section").scrollIntoView({
        behavior: "smooth",
      });
    },
    handleLogin() {
      this.$router.push("/login");
    },
    handleRegister() {
      this.$router.push("/register");
    },
    handleNavClick(item) {
      if (item.path) {
        // 检查是否需要登录
        const needAuthPaths = [
          "/repository",
          "/wendang",
          "/meeting",
          "/date",
          "/AIhelp/peopleChat",
          "/AIhelp/zhineng",
        ];
        if (
          needAuthPaths.some((path) => item.path.startsWith(path)) &&
          !getToken()
        ) {
          // 需要登录但未登录，跳转到登录页
          this.$router.push("/login");
        } else {
          // 不需要登录或已登录，直接跳转
          this.$router.push(item.path);
        }
      }
    },
    handleFeatureClick(feature) {
      if (feature.path) {
        // 检查是否需要登录
        const needAuthPaths = [
          "/repository",
          "/wendang",
          "/meeting",
          "/date",
          "/AIhelp/peopleChat",
          "/AIhelp/zhineng",
        ];
        if (
          needAuthPaths.some((path) => feature.path.startsWith(path)) &&
          !getToken()
        ) {
          // 需要登录但未登录，跳转到登录页
          this.$router.push("/login");
        } else {
          // 不需要登录或已登录，直接跳转
          this.$router.push(feature.path);
        }
      }
    },
    handleCarouselChange(index) {
      this.currentSlideIndex = index;
    },
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    },
    handleMobileNavClick(item) {
      this.isMobileMenuOpen = false;
      this.handleNavClick(item);
    },
    handleOutsideClick(event) {
      const mobileMenu = document.querySelector(".mobile-menu-panel");
      const mobileToggle = document.querySelector(".mobile-menu-toggle");
      if (
        mobileMenu &&
        !mobileMenu.contains(event.target) &&
        !mobileToggle.contains(event.target)
      ) {
        this.isMobileMenuOpen = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.homepage {
  position: relative;
  min-height: 100vh;
}

// 轮播图样式
.hero-carousel {
  position: relative;
  height: 100vh;

  .hero-carousel-container {
    .carousel-slide {
      position: relative;
      height: 100vh;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;

      // 动态背景网格
      .grid-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
          ),
          linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 50px 50px;
        animation: gridMove 20s linear infinite;
        z-index: 1;
        opacity: 0.3;

        @keyframes gridMove {
          0% {
            transform: translate(0, 0);
          }
          100% {
            transform: translate(50px, 50px);
          }
        }
      }

      .slide-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(0, 0, 0, 0.55) 0%,
          rgba(0, 0, 0, 0.25) 100%
        );
        z-index: 2;
      }

      .slide-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: white;
        z-index: 3;
        width: 85%;
        max-width: 900px;

        .slide-text {
          .slide-title {
            font-size: 4rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
            line-height: 1.2;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
            cursor: default;

            &.title-animate {
              opacity: 1;
              transform: translateY(0);
            }

            .title-line {
              display: inline-block;
              overflow: hidden;
              position: relative;

              &::after {
                content: "";
                position: absolute;
                bottom: -5px;
                left: 0;
                width: 0;
                height: 3px;
                background: linear-gradient(90deg, #409eff, #66b1ff);
                transition: width 1s ease 0.5s;
              }
            }

            &.title-animate .title-line::after {
              width: 100%;
            }
          }

          .slide-description {
            font-size: 1.4rem;
            margin-bottom: 3rem;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease 0.3s;
            line-height: 1.7;
            font-weight: 300;
            cursor: default;

            &.description-animate {
              opacity: 0.95;
              transform: translateY(0);
            }
          }

          .slide-actions {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease 0.6s;
            cursor: default;

            &.actions-animate {
              opacity: 1;
              transform: translateY(0);
            }

            .hero-btn {
              padding: 16px 40px;
              font-size: 1.1rem;
              border-radius: 12px;
              font-weight: 600;
              transition: all 0.3s ease;
              border: none;
              display: flex;
              align-items: center;
              gap: 8px;
              min-width: 160px;
              justify-content: center;
              position: relative;
              overflow: hidden;

              &::before {
                content: "";
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(
                  90deg,
                  transparent,
                  rgba(255, 255, 255, 0.2),
                  transparent
                );
                transition: left 0.5s ease;
              }

              &:hover::before {
                left: 100%;
              }

              &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.3);
                transform: translate(-50%, -50%);
                transition: width 0.6s ease, height 0.6s ease;
              }

              &:active::after {
                width: 300px;
                height: 300px;
              }

              i {
                font-size: 1.2rem;
                transition: transform 0.3s ease;
              }

              &:hover i {
                transform: translateX(3px);
              }
            }

            .primary-btn {
              background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
              color: white;
              box-shadow: 0 8px 25px rgba(64, 158, 255, 0.3);

              &:hover {
                transform: translateY(-3px);
                box-shadow: 0 12px 35px rgba(64, 158, 255, 0.4);
                background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
              }
            }

            .secondary-btn {
              background: rgba(255, 255, 255, 0.15);
              color: white;
              border: 2px solid rgba(255, 255, 255, 0.3);
              backdrop-filter: blur(10px);

              &:hover {
                transform: translateY(-3px);
                background: rgba(255, 255, 255, 0.25);
                border-color: rgba(255, 255, 255, 0.5);
                box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
              }
            }
          }
        }
      }

      // 滑动切换动画
      &.slide-active {
        .slide-content {
          animation: slideIn 0.8s ease-out;
        }
      }

      @keyframes slideIn {
        0% {
          opacity: 0;
          transform: translate(-50%, -40%);
        }
        100% {
          opacity: 1;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}

// 悬浮导航栏
.floating-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;

  &.navbar-scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12);
  }

  .navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    height: 80px;
    max-width: 1400px;
    margin: 0 auto;

    .navbar-logo {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      flex-shrink: 0;

      .logo-icon {
        font-size: 2.8rem;
        color: #fff;
        background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
        border-radius: 50%;
        box-shadow: 0 4px 16px rgba(64, 158, 255, 0.18);
        padding: 10px;
        flex-shrink: 0;
        border: 2px solid #fff;
        transition: box-shadow 0.3s;
      }

      .logo-text {
        font-size: 1.6rem;
        font-weight: 700;
        color: #303133;
        white-space: nowrap;
      }
    }

    .navbar-menu {
      display: flex;
      gap: 2.5rem;
      flex: 1;
      justify-content: center;
      margin: 0 2rem;

      .nav-item {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.8rem 1.2rem;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #606266;
        font-weight: 500;
        font-size: 1rem;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        flex-shrink: 0;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            135deg,
            rgba(64, 158, 255, 0.1) 0%,
            rgba(64, 158, 255, 0.05) 100%
          );
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        &:hover {
          background: rgba(64, 158, 255, 0.1);
          color: #409eff;
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);

          &::before {
            opacity: 1;
          }
        }

        .nav-icon {
          font-size: 1.3rem;
          transition: transform 0.3s ease;
          flex-shrink: 0;
        }

        &:hover .nav-icon {
          transform: scale(1.1);
        }
      }
    }

    // 移动端汉堡菜单
    .mobile-menu-toggle {
      display: none;
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(64, 158, 255, 0.1);
      }

      .hamburger {
        width: 24px;
        height: 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        span {
          display: block;
          width: 100%;
          height: 3px;
          background: #409eff;
          border-radius: 2px;
          transition: all 0.3s ease;
          transform-origin: center;
        }

        &.active {
          span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
          }

          span:nth-child(2) {
            opacity: 0;
          }

          span:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
          }
        }
      }
    }

    .navbar-actions {
      display: flex;
      gap: 1.2rem;
      align-items: center;
      flex-shrink: 0;

      .nav-btn {
        padding: 10px 24px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 1rem;
        border: none;
        white-space: nowrap;
        background: #f4f8fb;
        color: #409eff;
        box-shadow: none;
        transition: background 0.2s, color 0.2s;
      }

      .register-btn {
        background: #f4f8fb;
        color: #409eff;
        border: none;
      }

      .login-btn {
        background: #409eff;
        color: #fff;
        border: none;
      }
    }
  }

  // 移动端菜单面板
  .mobile-menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;

    &.open {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
    }

    .mobile-menu-content {
      padding: 1rem 2rem 2rem;

      .mobile-nav-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid rgba(64, 158, 255, 0.1);
        cursor: pointer;
        transition: all 0.3s ease;
        color: #606266;
        font-weight: 500;
        font-size: 1.1rem;

        &:last-child {
          border-bottom: none;
        }

        &:hover {
          color: #409eff;
          background: rgba(64, 158, 255, 0.05);
          padding-left: 1rem;
          border-radius: 8px;
        }

        .mobile-nav-icon {
          font-size: 1.4rem;
          color: #409eff;
          transition: transform 0.3s ease;
        }

        &:hover .mobile-nav-icon {
          transform: scale(1.1);
        }
      }
    }
  }
}

// 功能模块展示
.features-section {
  padding: 6rem 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

  .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2.5rem;

    .section-header {
      text-align: center;
      margin-bottom: 5rem;

      h2 {
        font-size: 3rem;
        font-weight: 800;
        color: #303133;
        margin-bottom: 1.5rem;
        background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      p {
        font-size: 1.2rem;
        color: #606266;
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.6;
      }
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
      gap: 2.5rem;

      .feature-card {
        background: white;
        padding: 2.5rem;
        border-radius: 20px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.4s ease;
        cursor: pointer;
        border: 1px solid rgba(64, 158, 255, 0.05);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
          transform: scaleX(0);
          transition: transform 0.3s ease;
        }

        &:hover {
          transform: translateY(-12px);
          box-shadow: 0 16px 50px rgba(64, 158, 255, 0.15);
          border-color: rgba(64, 158, 255, 0.2);

          &::before {
            transform: scaleX(1);
          }
        }

        .feature-icon {
          font-size: 3.5rem;
          color: #409eff;
          margin-bottom: 1.5rem;
          transition: all 0.3s ease;
          flex-shrink: 0;

          &:hover {
            transform: scale(1.1) rotate(5deg);
            color: #66b1ff;
          }
        }

        h3 {
          font-size: 1.6rem;
          font-weight: 700;
          color: #303133;
          margin-bottom: 1.2rem;
          line-height: 1.3;
        }

        p {
          color: #606266;
          line-height: 1.7;
          margin-bottom: 2rem;
          font-size: 1.05rem;
          flex: 1;
        }

        .feature-actions {
          margin-top: auto;

          .feature-btn {
            color: #409eff;
            font-weight: 600;
            font-size: 1.05rem;
            padding: 12px 20px;
            transition: all 0.3s ease;
            border-radius: 8px;
            background: rgba(64, 158, 255, 0.05);
            border: 1px solid rgba(64, 158, 255, 0.1);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            justify-content: center;

            &:hover {
              color: #66b1ff;
              transform: translateX(5px);
              background: rgba(64, 158, 255, 0.1);
              border-color: rgba(64, 158, 255, 0.2);
              box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
            }

            i {
              margin-left: 0;
              transition: transform 0.3s ease;
              font-size: 1.1rem;
            }

            &:hover i {
              transform: translateX(3px);
            }
          }
        }
      }
    }
  }
}

// 统计数据
.stats-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  color: white;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  }

  .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2.5rem;
    position: relative;
    z-index: 1;

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 3rem;
      text-align: center;

      .stat-item {
        padding: 2rem;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent
          );
          transition: left 0.5s ease;
        }

        &:hover {
          transform: translateY(-5px);
          background: rgba(255, 255, 255, 0.15);
          box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);

          &::before {
            left: 100%;
          }
        }

        .stat-number {
          font-size: 3.5rem;
          font-weight: 800;
          margin-bottom: 0.8rem;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
          transition: all 0.3s ease;
        }

        .stat-label {
          font-size: 1.2rem;
          opacity: 0.95;
          font-weight: 500;
          transition: all 0.3s ease;
        }
      }
    }
  }
}

// 页脚
.footer {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: white;
  padding: 4rem 0 2rem;

  .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2.5rem;

    .footer-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 3rem;
      margin-bottom: 3rem;

      .footer-section {
        h4 {
          font-size: 1.3rem;
          margin-bottom: 1.5rem;
          color: #409eff;
          font-weight: 700;
        }

        p {
          color: #bdc3c7;
          line-height: 1.7;
          margin-bottom: 0.8rem;
          font-size: 1rem;
        }

        .social-links {
          display: flex;
          gap: 1.5rem;

          i {
            font-size: 1.8rem;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 12px;
            border-radius: 50%;
            background: rgba(64, 158, 255, 0.1);

            &:hover {
              color: #409eff;
              background: rgba(64, 158, 255, 0.2);
              transform: translateY(-3px);
            }
          }
        }
      }
    }

    .footer-bottom {
      text-align: center;
      padding-top: 2.5rem;
      border-top: 1px solid #34495e;

      p {
        color: #95a5a6;
        font-size: 1rem;
      }
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .floating-navbar {
    .navbar-container {
      padding: 0 2rem;

      .navbar-menu {
        gap: 1.5rem;
        margin: 0 1rem;

        .nav-item {
          padding: 0.6rem 1rem;
          font-size: 0.95rem;

          .nav-icon {
            font-size: 1.2rem;
          }
        }
      }

      .navbar-actions {
        gap: 1rem;

        .nav-btn {
          padding: 8px 20px;
          font-size: 0.95rem;
        }
      }
    }
  }

  .features-section {
    .container {
      .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 2rem;

        .feature-card {
          padding: 2rem;

          .feature-icon {
            font-size: 3.2rem;
          }

          h3 {
            font-size: 1.5rem;
          }

          p {
            font-size: 1rem;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .hero-carousel {
    .carousel-slide {
      .slide-content {
        width: 90%;

        .slide-title {
          font-size: 2.8rem;

          .title-line::before {
            right: -8px;
          }
        }

        .slide-description {
          font-size: 1.1rem;
          margin-bottom: 2rem;
        }

        .slide-actions {
          flex-direction: column;
          align-items: center;
          gap: 1rem;

          .hero-btn {
            width: 100%;
            max-width: 280px;
            padding: 14px 30px;
            font-size: 1rem;
          }
        }
      }
    }
  }

  .floating-navbar {
    .navbar-container {
      padding: 0 1.5rem;
      height: 70px;

      .navbar-logo {
        .logo-icon {
          font-size: 1.8rem;
        }

        .logo-text {
          font-size: 1.4rem;
        }
      }

      .desktop-menu {
        display: none;
      }

      .mobile-menu-toggle {
        display: block;
      }

      .navbar-actions {
        gap: 0.8rem;

        .nav-btn {
          padding: 8px 16px;
          font-size: 0.9rem;
          min-width: auto;
        }
      }
    }
  }

  .features-section {
    padding: 4rem 0;

    .container {
      padding: 0 1.5rem;

      .section-header {
        margin-bottom: 3rem;

        h2 {
          font-size: 2.2rem;
        }

        p {
          font-size: 1.1rem;
        }
      }

      .features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;

        .feature-card {
          padding: 2rem;

          .feature-icon {
            font-size: 3rem;
          }

          .feature-actions {
            .feature-btn {
              width: 100%;
              justify-content: center;
              padding: 14px 20px;
            }
          }
        }
      }
    }
  }

  .stats-section {
    padding: 4rem 0;

    .container {
      padding: 0 1.5rem;

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;

        .stat-item {
          padding: 1.5rem;

          .stat-number {
            font-size: 2.8rem;
          }

          .stat-label {
            font-size: 1rem;
          }
        }
      }
    }
  }

  .footer {
    padding: 3rem 0 1.5rem;

    .container {
      padding: 0 1.5rem;

      .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }
  }
}

@media (max-width: 480px) {
  .hero-carousel {
    .carousel-slide {
      .slide-content {
        .slide-title {
          font-size: 2.2rem;
        }

        .slide-description {
          font-size: 1rem;
        }

        .slide-actions {
          .hero-btn {
            max-width: 250px;
            padding: 12px 24px;
          }
        }
      }
    }
  }

  .floating-navbar {
    .navbar-container {
      padding: 0 1rem;
      height: 60px;

      .navbar-logo {
        .logo-icon {
          font-size: 1.6rem;
        }

        .logo-text {
          font-size: 1.2rem;
        }
      }

      .navbar-actions {
        gap: 0.6rem;

        .nav-btn {
          padding: 6px 12px;
          font-size: 0.85rem;
        }
      }
    }

    .mobile-menu-panel {
      .mobile-menu-content {
        padding: 1rem 1.5rem 2rem;

        .mobile-nav-item {
          font-size: 1rem;
          padding: 0.8rem 0;

          .mobile-nav-icon {
            font-size: 1.3rem;
          }
        }
      }
    }
  }

  .stats-section {
    .container {
      .stats-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;

        .stat-item {
          padding: 1.2rem;

          .stat-number {
            font-size: 2.5rem;
          }
        }
      }
    }
  }

  .features-section {
    .container {
      .features-grid {
        .feature-card {
          padding: 1.5rem;

          .feature-icon {
            font-size: 3rem;
          }

          h3 {
            font-size: 1.4rem;
          }
        }
      }
    }
  }
}
</style></style>
